Develop a Javascript application that allows the user to enter strings into a variable number of input widgets. As a string is entered by the user its length is automatically displayed next to the input widget. Buttons are provided to control the interface and to provide some functionality.
• Clicking one button will add another input widget
• Clicking another button will remove an input widget, always leaving at least one input widget.
• Clicking anther button will cause the visible strings to be sorted
Everthing works besides the Remove button... I want to remove one text box at a time.
As well I want it to keep stored value even if the text box is deleted..
Below is the code:
HTML :
<!DOCTYPE html>
<html>
<head>
<title>Java script application</title>
<script src=\"form.js\" type=\"text/javascript\"></script>
<link href=\"form.css\" rel=\"stylesheet\" type=\"text/css\">
</head>
<body>
<div class=\"main_content\">
<div class=\"two\">
<h4>ADD TEXT Field</h4><button onclick=\"nameFunction()\">Name</button>
<button onclick=\"resetElements()\">Reset</button>
<button onclick =\"removeElement()\">Remove</button>
</div>
<div class=\"three\">
<h2>Dynamic Form!</h2>
<form id=\"mainform\" >
<span id=\"myForm\"></span>
<p></p><input type=\"button\" value=\"Sort\" onclick=\"fnsort()\">
</form>
</div>
</body>
</html>
=========================
Js File
var i = 0; /* Set Global Variable i */
var count =0;
function increment(){
i += 1; }
function removeElement(parentDiv, childDiv){
if (childDiv == parentDiv){
alert(\"The parent div cannot be removed.\");
}
else if (document.getElementById(childDiv)){
var child = document.getElementById(childDiv);
var parent = document.getElementById(parentDiv);
parent.removeChild(child);
}
else{
alert(\"Child div has already been removed or does not exist.\");
return false;
}
}
function nameFunction(){
var r = document.createElement(\'span\');
var y = document.createElement(\"INPUT\");
y.setAttribute(\"type\", \"text\");
y.setAttribute(\"placeholder\", \"Name\");
var g = document.createElement(\"Text\");
g.setAttribute(\"src\");
increment();
y.setAttribute(\"Name\", \"textelement_\" + i);
r.appendChild(y);
g.setAttribute(\"onclick\", \"removeElement (\'myForm\' , \'id_ \"+ i + \"\')\");
r.appendChild(g);
r.setAttribute(\"id\", \"id_\" + i);
document.getElementById(\"myForm\").appendChild(r);
count=count+1;
}
function resetElements(){
document.getElementById(\'myForm\').innerHTML = \'\';
i=0;
}
function fnsort()
{
var x;
x=count;
var strings=[]
var t;
var i=0;
t=x;
while(t!=0)
{
strings.push(document.forms[\"mainform\"].elements[i].value);
t=t-1;
i=i+1
}
strings=strings.sort()
var j=0;
var msg=\'\';
while(x!=0)
{
var msg=msg+strings[j]+\'\ \';
document.forms[\"mainform\"].elements[j].value=strings[j];
j=j+1;
x=x-1;
}
}